<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>订单详情</span>
        <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
      </div>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions title="基本信息" :column="1" border>
            <el-descriptions-item label="订单ID">{{ order.orderId }}</el-descriptions-item>
            <el-descriptions-item label="下单人UID">{{ order.uid }}</el-descriptions-item>
            <el-descriptions-item label="订单标题">{{ order.goodsSubject }}</el-descriptions-item>
            <el-descriptions-item label="订单描述">{{ order.body }}</el-descriptions-item>
            <el-descriptions-item label="订单创建时间">{{ parseTime(order.t) }}</el-descriptions-item>
            <el-descriptions-item label="付款时间">{{ parseTime(order.payTime) }}</el-descriptions-item>
            <el-descriptions-item label="退款时间">{{ parseTime(order.refundTime) }}</el-descriptions-item>
            <el-descriptions-item label="支付截止日期">{{ parseTime(order.payTimeout) }}</el-descriptions-item>
          </el-descriptions>
        </el-col>

        <el-col :span="12">
          <el-descriptions title="支付信息" :column="1" border>
            <el-descriptions-item label="支付方式">
              <span v-if="order.channel === 'alipay'">支付宝</span>
              <span v-else-if="order.channel === 'wx'">微信</span>
              <span v-else-if="order.channel === 'jglh_account'">积分账户</span>
              <span v-else>{{ order.channel }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="支付状态">
              <span v-if="order.status === 2">支付成功</span>
              <span v-else-if="order.status === 1">未支付</span>
              <span v-else-if="order.status === -1">已退款</span>
              <span v-else>{{ order.status }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="订单金额">¥{{ order.fee ? order.fee / 100 : 0.00 }}</el-descriptions-item>
            <el-descriptions-item label="支付金额">¥{{
                order.amount ? order.amount / 100 : 0.00
              }}
            </el-descriptions-item>
            <el-descriptions-item label="手续费" v-if="order.serverCharge">
              ¥{{ order.serverCharge ? order.serverCharge : 0.00 }}
            </el-descriptions-item>
            <el-descriptions-item label="支付宝交易号" v-if="order.alipayTradeNo">{{
                order.alipayTradeNo
              }}
            </el-descriptions-item>
            <el-descriptions-item label="微信交易号" v-if="order.transactionId">{{
                order.transactionId
              }}
            </el-descriptions-item>
            <el-descriptions-item label="微信用户openid" v-if="order.openid">{{ order.openid }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <el-descriptions title="其他信息" :column="2" border>
            <el-descriptions-item label="需要支付金额(分)" v-if="order.needPayFee">{{
                order.needPayFee
              }}
            </el-descriptions-item>
            <el-descriptions-item label="需要支付金额(元)" v-if="order.needPayTotalFee">{{
                order.needPayTotalFee
              }}
            </el-descriptions-item>
            <el-descriptions-item label="支付结果" v-if="order.result">{{ order.result }}</el-descriptions-item>
            <!--            <el-descriptions-item label="支付类型" v-if="order.tradeType">{{ order.tradeType }}</el-descriptions-item>-->
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {getOrder} from "@/api/user/order";

export default {
  name: "OrderDetail",
  data() {
    return {
      order: {}
    };
  },
  created() {
    const id = this.$route.params.id;
    this.getOrderDetail(id);
  },
  methods: {
    getOrderDetail(id) {
      getOrder(id).then(response => {
        this.order = response.data;
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    parseTime(time) {
      if (!time) return '';
      const date = new Date(time);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
